<template>
	<div class="box">
		<div class="box-small">
			<div class="box-small-left"></div>
			<div class="box-small-right">
				<div class="box-title">
					<h2>Hi</h2>
					<h2>欢迎登录</h2>
					<div>
						<h2>&nbsp;&nbsp;用户及任务管理系统</h2>
					</div>
				</div>

				<div class="box-form">
					<!-- 账号密码登录 -->
					<div v-if="showdiv">
						<label>
							<img src="../../img/user-icon.png" alt="">
							<input type="text" id="text" placeholder="用户名" v-model="user.username" name="username"/>
						</label>
						<label>
							<img src="../../img/password-icon.png" alt="">
							<el-input placeholder="请输入密码" v-model="user.password" name="password" show-password></el-input>
							<!-- <input type="password"  id="password"   placeholder=" 密码" v-model="user.password"/> -->
						</label>
						<el-button type="primary" @click.pervent="login()" size="mini">登录</el-button>
					</div>
					<!-- 手机验证码登录 -->
					<div v-if="!showdiv">
						<label>
							<img src="../../img/user-icon.png" alt="">
							<input type="text" id="text" placeholder="手机号" v-model="phoneuser.phone" name="phone"/>
						</label>
						<label>
							<img src="../../img/password-icon.png" alt="">
							
							<el-input placeholder="验证码" v-model="phoneuser.code" name="code" ></el-input>
							<el-button type="primary" @click.pervent="sendmessage()" size="mini" >发送验证码</el-button>
							<!-- <input type="password"  id="password"   placeholder=" 密码" v-model="user.password"/> -->
						</label>
						<label>
							<el-button type="primary" @click.pervent="sendmessage()" size="mini" >发送验证码</el-button>
							<!-- <input type="password"  id="password"   placeholder=" 密码" v-model="user.password"/> -->
						</label>
						<el-button type="primary" @click.pervent="phonelogin()" size="mini">登录</el-button>
					</div>
						<div class="other">
						                        <div class="other-title">
						                            <div class="title-line"></div>
						                            <p>其他方式登陆</p>
						                            <div class="title-line"></div>
						                        </div>
						                        <div class="other-list">
						                            <ul>
						                                <li>
															<div style="position: absolute;left: 1150px;" v-if="showdiv">
															<a href="#" @click="showdiv=!showdiv"><img src="../../img/phone.jpg"></a>
															<span>手机登录</span>
															</div>
															<div style="position: absolute;left: 1150px;" v-if="!showdiv">
															<a href="#" @click="showdiv=!showdiv"><img src="../../img/mima.jpg"></a>
															<span>密码登录</span>
															</div>
															<div style="position: absolute;left: 1250px;">
						                                    <a href="#" @click="qqlogin()"><img src="../../img/list-qq.png"></a>
						                                    <span>QQ登录</span>
															</div>
						                                </li>
						                                
						                            </ul>
						                        </div>
						                    </div>
					</form>
				</div>
			</div>
		</div>
		<div class="box-footer">
		</div>
	</div>


</template>

<script>
	export default {
		name: "box",
		data() {
			return {
				//显示
				showdiv:true,
				//login
				user: {
				  username:null,
				  password:null	
				},
				phoneuser:{
					phone:null,
					code:null
				}


			}
		},
		methods: {
			login() {
				let _this=this;
				let data="username="+this.user.username+"&password="+this.user.password;
				this.$http.post("/login",data,{
					headers:{
						"Content-Type":"application/x-www-form-urlencoded"
					}
					}).then(resp => {
						if (resp.data.code!=null && resp.data.code== 500) {
							localStorage.setItem("loginuser",resp.data.data);
							this.$router.push("/admin");
						} else {
							this.$message({
								message: '用户名或密码错误！',
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
			},
			phonelogin() {
				let _this=this;
				let data="phone="+this.phoneuser.phone+"&code="+this.phoneuser.code;
				this.$http.post("/phonelogin",data,{
					headers:{
						"Content-Type":"application/x-www-form-urlencoded"
					}
					}).then(resp => {
						if (resp.data.code!=null && resp.data.code== 500) {
							localStorage.setItem("loginuser",resp.data.data);
							this.$router.push("/admin");
						} else {
							this.$message({
								message: '手机号或者验证码错误！',
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
			},
			sendmessage(){
				this.$http.post("/user/sendmessage")
					.then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							alert(resp.data.data);
						} else {
							this.$message({
								message: resp.data.message,
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
				
			},
			qqlogin(){
				let url="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101780702&response_type=code&redirect_uri=http://www.pawntest.com/qqlogin";
			    let mtop=screen.height/2-160;
				let mleft=screen.width/2-225;
				let w=window.open(url,"TencentLogin","left="+mleft+",top="+mtop+",width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
			    let _this=this;
				window.addEventListener("message",e=>{
					if(e.data != 'undefined'){
						console.log(e.data);
						localStorage.setItem("loginuser",e.data);
						setTimeout(function(){
							w.close();
							_this.$router.push("/main/task");
						},1000)//延时一秒关闭子窗口	
					}else{
						//登录失败，没有数据，只关窗口，不调转
						setTimeout(function(){
							w.close();
						},1000)//延时一秒关闭子窗口	
					}
				})
			}

		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}


	.box {
		/* display: flex; */
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100%;
		height: 100%;
		background: url("../../img/index-gb.png") center center no-repeat;
		top:100px;
		left:150px;
	}

	.box-small {
		display: flex;
		justify-content: space-between;
		width: 84%;
		height: 76%;
		background-color: #ffffff;
		/*阴影效果*/
		box-shadow: -2px 0px 21px 0px rgba(190, 190, 190, 0.56);
		border-radius: 20px;
	}

	.box-small-left {
		width: 52%;
		height: 100%;
		background: url("../../img/smallbox-left-bg.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.box-small-right {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 48%;
		height: 100%;
		
	}

	.box-title {
		display: block;
		width: 100%;
		height: 15%;
		text-align: center;
		padding: 30px;
	}

	.box-form {
		width: 100%;
		height: 220px;
		/*background: red;*/
	}

	.box-form label {
		display: flex;
		align-items: center;
		width: 300px;
		height: 40px;
		margin: 20px auto;
		border-radius: 30px;
		border: solid 1px #9b9b9b;
		overflow: hidden;
	}

	label img {
		margin: 5px 20px;
		display: inline-block;
		vertical-align: top;
	}

	label input {
		outline: transparent;
		height: 100%;
		border: none;
		background: transparent;
	}

	.box-form button {
		display: block;
		margin: auto;
		width: 300px;
		height: 40px;
		background: #098dee;
		color: #ffffff;
		border: none;
		border-radius: 30px;
	}

	.other-title {
		width: 400px;
		display: flex;
		margin: auto;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		font-size: 15px;
	}

	.title-line {
		width: 130px;
		height: 2px;
		background-color: #c4c2c1;
	}

	.other-list ul {
		display: flex;
		justify-content: space-between;
	}

	.other-list ul li img {

		width: 40px;
		height: 40px;
		display: block;
		margin: auto;
		opacity: 0.7;
		background: center center no-repeat;
		/*background: #9b9b9b;*/
	}

	.other-list ul li {
		list-style: none;
		padding-top: 20px;
		color: #666666;

	}

	.footer {
		width: 150px;
		height: 30px;
		border: gold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
